<template>
    <div class="app-content">
        <div class="bread_crumbs" v-if="navList.length">
            <div
                class="nav_item"
                v-for="(item,index) in navList"
                :key="item.name"
                :class="[index==navList.length - 1 ? 'now' : 'prev']"
            >
                <span>{{item.name}}</span>
                <div class="arrow_wrap" v-if="index != navList.length - 1">
                    <view class="iconfont iconjiantou"></view>
                </div>
            </div>
        </div>
        <div class="cell_item" v-if="option.department_id!=0" @click="toAddDepartment">
            <div class="left_wrap">
                <view class="iconfont iconicon-test"></view>
                <span class="custom-title">新建部门</span>
            </div>
        </div>

         <radio-group @change="checkChange">
            <div class="cell_item" v-for="item in departmentList" :key="item.department_id">
                <div class="left_wrap">
                     <radio :value="item.department_id+''" :checked="item.check" color="#ffd11a" />
                    <span class="custom-title">{{item.name}}</span>
                </div>
                <span class="right_wrap" v-if="item.is_level" @click="jumpNext(item.department_id)">
                        <view class="iconfont iconxiaji"></view>
                        <span class="right_txt">下级</span>
                </span>
            </div>
        </radio-group>

        <!-- <van-checkbox-group v-model="result" :max="1" @change="checkChange">
        <div class="cell_item" v-for="item in departmentList" :key="item.department_id">
            <van-cell size="large">
                <template slot="title">
                    <div class="left_wrap">
                        <van-checkbox checked-color="#ffd11a" v-model="item.check" :name="item" />
                        <span class="custom-title">{{item.name}}</span>
                    </div>
                </template>
                <template slot="default" v-if="item.is_level">
                    <span class="right_wrap" @click="jumpNext(item.department_id)">
                        <i class="iconfont iconxiaji"></i>
                        <span class="right_txt">下级</span>
                    </span>
                </template>
            </van-cell>
        </div>
        </van-checkbox-group> -->

        <div class="bottom_bar">
            <div class="left_txt">{{selected}}</div>
            <div class="right_btn" @click="submit">确定</div>
        </div>
    </div>
</template>

<script>
import { selDepartment, moveStaff } from '@/api/staffManage'
import { mapState } from 'vuex'
// import { setTimeout } from 'timers'
export default {
	name: 'SelDepartment',
	data() {
		return {
			navList: [],
			departmentList: [],
			selected: '请选择部门',
			selId: '',
			back_department_id: '',
			option: {}
		}
	},
	onLoad(option) {
		this.option = option
	},
	onShow() {
		this.getDepartmentList()
	},
	methods: {
		getDepartmentList() {
			const { department_id, num } = this.option
			selDepartment({ department_id, num }).then(
				res => {
					if (res.data.data && res.data.data.length) {
						this.departmentList = res.data.data.map(item => {
							item.check = false
							return item
						})
					} else {
						this.departmentList = []
					}
					this.back_department_id = res.data.back_department_id
					this.navList = res.data.nav_tier || []
				}
			)
		},
		checkChange(e) {
			console.log(e, '单选事件')
			this.selId = e.detail.value
			this.selected = this.departmentList.find(item => item.department_id == e.detail.value).name
			// this.selected = item.length ? item[0].name : '请选择部门'
		},
		jumpNext(id) {
			const params = {
				department_id: id,
				num: ++this.option.num,
				relation_ids: this.option.relation_ids
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/selDepartment${this.commonJS.queryData(params)}`
			})
		},
		submit() {
			if (!this.selId) {
				uni.showToast({
					title: '请选择部门',
					icon: 'none'
				})
				return
			}
			const params = {
				relation_ids: this.option.relation_ids,
				department_id: this.selId
			}
			moveStaff(params).then(res => {
				uni.showToast({
					title: '移动成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/admin/staffManage/staffManage?department_id=${this.selId}`
					})
				}, 500)
			})
		},
		toAddDepartment() {
			uni.navigateTo({
				url: `/pages/admin/staffManage/addDepartment?department_id=${this.back_department_id}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
    .iconfont {
        color: #ff6900;
    }
    .iconicon-test {
        font-size: 38px;
    }
    .iconxiaji {
        font-size: 32px;
    }
    .mt92 {
        margin-top: 92px;
    }
    .mt184 {
        margin-top: 184px;
    }
    .bread_crumbs {
        height: 76px;
        padding: 0 29px;
        display: flex;
        align-items: center;
        .nav_item {
            display: flex;
            align-items: center;
            span {
                font-size: 28px;
            }
            .arrow_wrap {
                padding: 0 20px 0 18px;
                .iconjiantou {
                    color: rgba(153, 153, 153, 1);
                }
            }
            &.prev {
                span {
                    color: rgba(51, 51, 51, 1);
                }
            }
            &.now {
                span {
                    color: rgba(153, 153, 153, 1);
                }
            }
        }
    }
    .right_txt {
        font-size: 32px;
        color: rgba(255, 105, 0, 1);
    }
    .cell_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 24px 32px;
        background-color: #fff;
        position: relative;
        &::before {
            content: "";
            width: 1px;
            height: 50px;
            background-color: rgba(238, 238, 238, 1);
            position: absolute;
            right: 165px;
            top: 50%;
            margin-top: -25px;
        }
        .left_wrap {
            display: flex;
            align-items: center;
        }
        .custom-title {
            font-size: 32px;
            color: rgba(51, 51, 51, 1);
            padding-left: 21px;
        }
    }
    .bottom_bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100px;
        z-index: 999;
        display: flex;
        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
        .left_txt {
            padding-left: 39px;
            font-size: 28px;
            color: rgba(102, 102, 102, 1);
            flex: 1;
            height: 100%;
            line-height: 100px;
            background-color: #fff;
        }
        .right_btn {
            width: 264px;
            height: 100%;
            line-height: 100px;
            text-align: center;
            background: rgba(255, 209, 26, 1);
            font-size: 32px;
            color: rgba(58, 27, 4, 1);
        }
    }
</style>
